Saludos chicos, mencionaré desde el principio que soy nuevo en este mundo y me encantaría que me ayudaran con el siguiente problema:
tengo un boton Cuando se hace clic, el botón abre una ventana emergente y reproduce automáticamente un video que se encuentra dentro de la ventana emergente. Lo que quiero hacer es lo siguiente:
Cuando el usuario haga clic en el botón, se activará la ventana emergente y el video se reproducirá automáticamente. Cuando el usuario haga clic en el botón cerrar "X", la ventana emergente debería cerrarse y el video debería detenerse/pausarse.
Tengo el siguiente código:
HTML
<div class="video-button-container"> <img src="media/video-bg.png"> <a href="#" onclick="toggle();"> <img src="media/play.png" class="play"> </a> </div> <div class="video-container"> <img src="media/close.png" class="close" onclick="close();"> <video src="media/video.mp4" controls="true" class="video"></video> </div>CSS
.video-button-container { position: absolute; top: 70px; right: 70px; } .play { position: absolute; top: 25%; right: 35%; } .video-container { position: absolute; right: 0; top: 0; z-index: 10000; background: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; visibility: hidden; opacity: 0; } .video-container.active { visibility: visible; opacity: 1; } .video-container video { position: relative; max-width: 900px; outline: none; } .close { position: absolute; top: 80px; right: 20px; cursor: pointer; max-width: 32px; } @media (max-width: 991px) { .video-container video { max-width: 90%; } }JS
var videoElem = document.querySelector(".video-container video"); var trailerElem = document.querySelector(".video-container") function toggle() { trailerElem.classList.add("active"); videoElem.play(); videoElem.currentTime = 0; } function close() { trailerElem.classList.remove("active"); videoElem.pause(); videoElem.currentTime = 0; }¿Alguien puede decirme qué estoy haciendo mal? ¡Que tengas un lindo día!
Sé que si haces el video en una ventana externa, puedes cerrar esa ventana, lo que puede ser útil para cambiar el tamaño de la ventana y mucho más. Lo que significa que podría detectar cuándo se presiona el botón, podría activarlo para cerrar la ventana y hacer x. (que me doy cuenta de que has hecho)
Sé que puede cerrar la ventana emergente con window.close(), así que aquí hay un ejemplo parcialmente:
var popup; function onReadyFunc() { popup = window.open("https://google.com", "_blank", "top=500,left=500,width=400,height=400"); } function closePopup() { popup.close() }y llamaría a onReadyFunc () cuando se cargue su página principal; de lo contrario, es posible que tenga que hacer un botón en la parte superior del video para cuando haga clic en él, no estoy muy seguro de si puede detectar botones externos, aunque probablemente si tiene acceso para cambiar la clase /id, entonces seguramente puede agregar un evento cuando se hace clic para hacer su función para cerrar la ventana y lo que sea.
El elemento close.png no tiene ningún evento vinculado, ya que no es visible al cargar la página, por lo que debe vincular el evento después de la carga.
/* function close() { trailerElem.classList.remove("active"); videoElem.pause(); videoElem.currentTime = 0; } */ window.onload = function () { document.getElementsByClassName("close")[0] .addEventListener("click", function (e) { trailerElem.classList.remove("active"); videoElem.pause(); videoElem.currentTime = 0; }); };